<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <script  type="text/javascript" src="/common/js/boot.js"></script>
    <link rel="stylesheet" type="text/css" href="/common/zTree/zTreeStyle/zTreeStyle.css"/>
    <script type="text/javascript" src="/common/zTree/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="/common/zTree/jquery.ztree.excheck-3.5.js"></script>
    <title>演示zTree的使用</title>
</head>
<body>
<h1>加载树</h1>
    <div class="container">
        <input type="hidden" id="data" value="${zTree}"/>
        <ul id="ztree" class="ztree" style="width:99%;height:195px;"></ul>
    </div>
</body>
<script type="text/javascript">
    var setting={
        view: {
            dblClickExpand: false,
            showLine: true, //是否显示节点间的连线
            selectedMulti: false
        },check: {
            enable: true,
            nocheckInherit: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        isSimpleData:true,       //数据是否采用简单的Array格式，默认FALSE
        treeNodeKey:"id",       //在isSimpleData格式下，当前节点id属性
        treeNodeParentKey:"pId",    //....，当前节点的父节点
        checkable:true,          //每个节点上是否显示chekBox
    }
    var treeNodes;
//    var treeNodes = [
//        {"id":1, "pId":0, "name":"test1"},
//        {"id":11, "pId":1, "name":"test11"},
//        {"id":12, "pId":1, "name":"test12"},
//        {"id":111, "pId":11, "name":"test111"}
//    ];
    $(function () {
       $.ajax({
            async:false,
            type:'POST',
            dataType:"json",
            url:"/get/data",
            success:function (result) {
                treeNodes=result;
            },
            error:function () {

            }
        });

        $.fn.zTree.init($("#ztree"),setting,treeNodes);
    });
</script>
</html>